<template>
  <view class="login">
    <view>
      <view class="foreView">
        <text class="title">手机号登录</text>
        <form @submit="onSubmit">
          <view class="inputView mobile">
            <input
              class="uni-input"
              type="number"
              maxlength="11"
              v-model="mobile"
              style="margin-left: 8px"
              :adjust-position="true"
              placeholder="请输入手机号"
            />
          </view>
          <button form-type="submit" class="loginBtn" size="default">登录</button>
        </form>
      </view>
    </view>
  </view>
</template>

<script>
import { phoneLogin, getUserInfo } from '@/api/login.js';
import { TOKEN } from '@/config/config';

export default {
  data() {
    return {
      mobile: ''
    };
  },
  onLoad(options) {
    uni.setStorageSync(TOKEN, '');
    this.$store.dispatch('setUserInfo', '');
    // todo
  },
  methods: {
    onSubmit(e) {
      phoneLogin({
        mobile: this.mobile
      }).then((res) => {
        console.log(res);
        if (res.success) {
          uni.setStorageSync(TOKEN, res.result.token);
          this.$store.dispatch('setUserInfo', res.result.userInfo);
          uni.showToast({
            title: '登录成功',
            icon: 'none'
          });
          uni.switchTab({
            url: '/pages/index/index'
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  min-height: 100vh;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .foreView {
    margin-top: calc(254rpx + env(safe-area-inset-top));
    margin-left: 40px;
    margin-right: 40px;
  }

  .title {
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 33px;
  }

  .iconImg > img{
    width: 18px;
    height: 18px;
  }

  .inputView {
    display: flex;
    align-items: center;
    height: 45px;
    border-bottom: 1px solid #dddddd;
  }

  .mobile {
    margin-top: 57px;
  }

  .loginBtn {
    margin-top: 40px;
    width: 100%;
  }

}
</style>
